<template>
  <div class="home">
    <!-- 非管理员展示页面 -->
    <!-- <div :class="['fixed_nav_main',{'top':role == 'manager' && !fixed},{'fixed':fixed}]" id="fixedNav"> -->
    <div :class="['fixed_nav_main', { fixed: fixed }]" id="fixedNav">
      <div class="leftFix">
        <ul class="fixed_nav_tabs">
          <li
            v-for="(item, index) in titleList"
            :key="index"
            :class="{ active: ins == index }"
            @click="activeState(index)"
          >
            <img
              :src="item.url"
              alt
              style="vertical-align: middle; margin-right: 5px"
            />
            <!-- <span  style="display:inline-block;width:17px;height:18px"></span> -->
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="fr">
        <span>截至{{ acctMonth }}</span>
      </div>
    </div>
    <!-- 管理员界面 -->
    <!--   <div  v-if="role == 'manager' " id="manager">
      <manager @acctMonthData="acctMonthData"></manager>
    </div> -->

    <!-- 量收趋势 -->
    <!--    <div class="liangsqs" id="liangsqs">
          <liangsqs></liangsqs>
        </div> -->
    <!--
    <div class="liangsqs2"  id="liangsqs2">
      <liangsqs2></liangsqs2>
    </div> -->
    <div v-if="role == 'manager'" id="manager">
      <manager1 @acctMonthData="acctMonthData"></manager1>
    </div>
    <div class="IncomeComposition" id="IncomeComposition">
      <IncomeComp></IncomeComp>
      <!-- <ProductComp></ProductComp> -->
    </div>
    <!--整体评价-->
    <div :class="['radar', { scorllTop: fixed }]" id="radar">
      <global></global>
    </div>
    <!--收入预估  -->
    <!--    <div class="income_tracking" id="income_tracking">
      <incomingTracking></incomingTracking>
    </div> -->
  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
// import manager from "@/views/workSpace/managerView"
import manager1 from "@/views/workSpace/managerView1";
import global from "@/views/workSpace/globalAssessment";
import IncomeComp from "@/views/workSpace/IncomeComp";
// import ProductComp from "@/views/workSpace/ProductComp"
// import liangsqs from "@/views/workSpace/liangsqs"
// import liangsqs2 from "@/views/workSpace/liangsqs2"
// import incomingTracking from "@/views/workSpace/incomingTracking"
import { getCookie } from "@/common/js/cookie";
import {
  setSessionStorage,
  getSessionStorage,
  removeSessionStorage,
} from "@/common/js/storage";
import Watermark from "@/common/js/watermark"; //加水印
export default {
  data() {
    return {
      role: "manager",
      // role: "",
      ins: 0,
      titleList: [
        {
          name: "量收趋势",
          url: require("@/assets/images/common/trend2Active.png"),
        },
        {
          name: "分区域完成",
          url: require("@/assets/images/common/compo.png"),
        },
        {
          name: "经营画像",
          url: require("@/assets/images/common/portrait.png"),
        },
      ],
      fixed: false,
      offsetTop: null,
      acctMonth: "",
      name: JSON.parse(getSessionStorage("accountInfo")).waterMark,
    };
  },
  components: {
    // manager,
    global,
    // liangsqs,
    // liangsqs2,
    // incomingTracking,
    IncomeComp,
    // ProductComp,
    manager1,
  },
  created() {},
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    this.$nextTick(() => {
      this.offsetTop = document.querySelector("#fixedNav").offsetTop;
      // let h = document.body.scrollHeight;
      // Watermark.set(this.name, h);
    });
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    acctMonthData(val) {
      this.acctMonth = val;
    },
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.fixed = scrollTop > this.offsetTop ? true : false;
      // this.fixed = true;
    },
    activeState(val) {
      this.ins = val;
      if (val == 0) {
        document.querySelector("#manager").scrollIntoView(false);
        this.titleList[0].url = require("@/assets/images/common/trend2Active.png");
        this.titleList[1].url = require("@/assets/images/common/compo.png");
        this.titleList[2].url = require("@/assets/images/common/portrait.png");
      }
      if (val == 1) {
        document.querySelector("#IncomeComposition").scrollIntoView(false);
        this.titleList[1].url = require("@/assets/images/common/compoActive.png");
        this.titleList[0].url = require("@/assets/images/common/trend2.png");
        this.titleList[2].url = require("@/assets/images/common/portrait.png");
      }
      if (val == 2) {
        // document.querySelector("#income_tracking").scrollIntoView(false);
        document.querySelector("#radar").scrollIntoView(false);
        this.titleList[2].url = require("@/assets/images/common/portraitActive.png");
        this.titleList[0].url = require("@/assets/images/common/trend2.png");
        this.titleList[1].url = require("@/assets/images/common/compo.png");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  background-color: #f5f9ff;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  padding: 15px 15px 15px 15px;
  position: relative;
  z-index: 211;
  .fixed_nav_main {
    width: 99%;
    background-color: #ffffff;
    height: 50px;
    line-height: 50px;
    border: 1px solid #dee5f3;
    border-radius: 5px;
    padding: 0 20px;
    &.fixed {
      // width:100%;
      border: 0;
      z-index: 99;
      border-top: 1px solid transparent;
      border-bottom: 1px solid #dee5f3;
      border-radius: 0px;
      position: fixed;
      top: 68px;
    }
    &.top {
      margin: 10px 0;
    }
    .fixed_nav_tabs {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 14px;
      columns: #333333;
      font-weight: 400;
      img {
        width: 20px;
        height: 20px;
      }
      li {
        height: 48px;
        line-height: 48px;
        cursor: pointer;
        font-weight: 800;
        color: #848bac;
        &.active {
          color: #6a82fd;
          border-bottom: 3px solid #6a82fd;
        }
      }
    }
    .leftFix {
      width: 50%;
      display: inline-block;
    }
    .fr {
      display: inline-block;
    }
  }
}
</style>
